<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 
        v-bind:vue中提供的 是用于绑定属性的一个命令
        强制绑定数据
        比方class属性 style属性 value href 等等
        只要是属性 就能用v-bind指令进行绑定
        v-bind:attr="xxx":给attr属性强制绑定xxx数据

        简写 : (冒号)
     -->

        <h1 study="js">{{msg+1}}</h1>
        <h1 v-bind:study.prop="study">{{msg+2}}</h1>
        <h1 v-bind:count="count-1">{{msg+3}}</h1>
        <h1 v-bind:isHappy="isHappy?'yes':'NO'">{{msg+3}}</h1>
        <h1 v-bind:src="'http://www.baidu.com/'+src"  alt="">{{msg+3}}</h1>
 
    </div>
</body>
<script type="text/javascript">
    //清除生产提示全局配置Vue.config.productionTip = false;
    Vue.config.productionTip = false;

    //实例化vue
    //data的函数式写法

    /*
    data的函数式写法，请务必使用普通函数，切勿使用箭头函数。
    
    当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。
    如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，
    从而返回初始数据的一个全新副本数据对象
    */
    const vm = new Vue({
        el: "#app",
        data() {
            return {
                msg: "nihao nihao vue vue",
                study: "react",
                count: 100,
                isHappy: false,
                scr: "01.jpg"
            }
        }
    })
</script>

</html>